{% extends "base.html" %}

{% block style %}
    <link rel="stylesheet" type="text/css" href= "/static_media/css/user/userHome.css">
    {% if excursionForm %}
    <link rel="stylesheet" type="text/css" href="/static_media/js/jqueryui/themes/smoothness/jquery.ui.all.css">
    {% endif %} 
{% endblock style %}

{% block script %}
	{% if excursionForm %}
    <!-- JQuery -->
    <script src="/static_media/js/jquery-1.9.1.min.js"></script>
	<script src="/static_media/js/jqueryui/ui/jquery.ui.core.js"></script>
	<script src="/static_media/js/jqueryui/ui/jquery.ui.widget.js"></script>
	
	<!-- calendar -->
	<script src="/static_media/js/jqueryui/ui/jquery.ui.datepicker.js"></script>
    <script src="/static_media/js/action/datepicker.js"></script>
    
    <!-- time picker -->
	<script src="/static_media/js/jqueryui/external/jquery.mousewheel.js"></script>
	<script src="/static_media/js/jqueryui/external/globalize.js"></script>
	<script src="/static_media/js/jqueryui/external/globalize.culture.de-DE.js"></script>
    <script src="/static_media/js/jqueryui/ui/jquery.ui.button.js"></script>
	<script src="/static_media/js/jqueryui/ui/jquery.ui.spinner.js"></script>
    <script src="/static_media/js/action/timepicker.js"></script>
    {% endif %}  
{% endblock script %}

{% block content %}
		<div class="left">
			<div id="accordionMenu" class="accordion">
				<style type="text/css">
		.accordion #one:target .heading + .menuContent {
			height:{{height}}px;
		}
		</style>
				<div id="one" class="section">
					<div class ="heading"> <a href="#one">My Excursions</a> </div>
					<div class="menuContent">
						<ul>
							{% for excursion in my_excursions %}
							<li> <a href="/user/excursion/{{ excursion.pk }}/ ">{{ excursion.name }}</a> </li>
							{% endfor %}
						</ul>
					</div>
				</div>
				<div id="two" class="section">
					<div class ="heading"> <a href="#two">My Images</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/images/">My Images</a> </li>
						</ul>
					</div>
				</div>
				<div id="three" class="section">
					<div class ="heading"> <a href="#three">Create</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/new_excursion/">Excursion</a> </li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- end .left --> 
		
		<!-- .right -->
		<div class="right">
			{% if excursionForm %}
			{% for item in item_list %}
			<div class="item">
				<form action="/user/new_excursion/" method="post">
					{% csrf_token %}
					<div class="formItem">
						<div class="fieldError"> {{ item.non_field_errors }} </div>
						
						<label for="id_name" class="fieldHeading" >Excursion Name</label>
						<div class="fieldError"> {{ item.name.errors }} </div>
						<div class="fieldWrapper"> {{ item.name }} </div>
						
						<label for="id_description" class="fieldHeading" >Excursion Description</label>
						<div class="fieldError"> {{ item.description.errors }} </div>
						<div class="fieldWrapper"> {{ item.description }} </div>
						<div class ="leftColumn">
							<label for="id_date" class="fieldHeading">Date of Excursion</label>
							<div class="fieldError"> {{ item.date.errors }} </div>
							<div class="fieldWrapper"> {{ item.date }} </div>
							<label for="id_time" class="fieldHeading">Time of Excursion</label>
							<div class="fieldError"> {{ item.time.errors }} </div>
							<div class="fieldWrapper"> {{ item.time }} </div>
						</div>
						<div class ="rightColumn">
							<label for="id_public" class="fieldHeading">Visibility of Excursion</label>
							<div class="fieldError"> {{ item.public.errors }} </div>
							<div class="boolFieldWrapper"> {{ item.public }} Public</div>
							<label for="id_password" class="fieldHeading">Password for Excursion</label>
							<div class="fieldError"> {{ item.password.errors }} </div>
							<div class="fieldWrapper"> {{ item.password }} </div>
						</div>
					</div>
					<input type="submit" value="  Create  " id="createButton" class="button"/>
				</form>
			</div>
			{% endfor %}
			{% elif joinForm %}
			{% for item in item_list %}
			<div class="item">
				<form action="/user/excursion/join/private/{{excursionItem.pk}}/" method="post" class="formItem">
					{% csrf_token %}
					<div class="fieldError"> {{ item.non_field_errors }} </div>
					{{ state }}
					<label for="id_name" id="joinFieldHeading" >Enter Password:</label>
					<div class="fieldError"> {{ item.password.errors }} </div>
					<div id="joinWrapper"> {{ item.password }} </div>
					<input type="submit" value="Join" id="joinButton" class="button"/>
				</form>
			</div>
			{% endfor %}        		
			{% else %}
			{% for item in item_list %}
			<div class="item"> {{ item }} </div>
			{% endfor %}
			{% endif %}
		</div>
{% endblock content %}
